.root{
  box-sizing: border-box;
  overflow: hidden;
  
  @keyframes faedin {
    0% {
      opacity: 0;
      transform: translateY(50rpx);
    }
    100%{
      opacity: 1;
      transform: translateY(0rpx);
    }
  }
  // 瀑布流相册
    .left{
      height: 100vh;
      overflow: hidden;
      position: relative;
      // margin-top: -169rpx;
      .album-item{
        width: 100%;
        height: 520rpx;
        background-color: #fff;
        position: relative;
        margin-bottom: 2vh;
        box-sizing: border-box;
        .bg01{
          position: fixed;
          top: 0;
          left: 0;
          z-index: 2;
        }
        .album-content{
          position: absolute;
          z-index: 9;
          width: 100%;
          height: 100%;
          padding:20rpx 30rpx;
          box-sizing: border-box;
          .image{
            width: 100%;
            height: 75%;
            position: relative;
            z-index: 999;
            .block{
              height: 60rpx;
              line-height: 60rpx;
              text-align: left;
              position: absolute;
              bottom: 0;
              z-index: 999;
              width: 100%;
              .views,.collects{
                vertical-align: middle;
                display: inline-block;
                z-index: 999;
                height: 100%!important;
                .count1,.count,image{
                  display: inline-block;
                  vertical-align: middle;
                }
                icon,.count{
                  vertical-align: middle;
                }
                .count{
                  font-size: 30rpx;
                  color: #eee;
                }
                .count1{
                  font-size: 30rpx;
                  color: #eee;
                }
                image{
                  width: 40rpx;
                  height: 30rpx;
                  margin-right: 10rpx;
                }
              }
              .views{
                padding-left: 20rpx;
              }
              .collects{
                position: absolute;
                right: 20rpx;
                bottom: 0;
              }
            }
           
            .mainpic{
              width: 100%;
              height: 368rpx;
              object-fit: cover;
              border-radius: 20rpx;
            }
          }
          .content{
            width: 100vw;
            height: 120rpx;
            padding: 20rpx 30rpx;
            transform: translateX(-30rpx);
            background-color: #fff;
            .left-item{
              width: 50%;
              height: 100%;
              float: left;
              padding-left: 20rpx;
              .title{
                font-size: 34rpx;
                font-weight: 700;
                color: #000;
                height: 50%;
                align-items: center;
                width: 200%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin-top: 10rpx;
              }
              .date{
                font-size: 26rpx;
                color: #8296C0;
                height: 50%;
                display: flex;
                align-items: center;
                margin-top: 12rpx;
              }
            }
            .right-item{
              height: 100%;
              width: 50%;
              float: right;
              position: relative;
              image,.address{
                vertical-align: middle;
              }
              image{
                width: 20rpx;
                height: 25rpx;
                object-fit: cover;
                margin-right: 10rpx;
              }
              .address{
                position: absolute;
                right: 20rpx;
                bottom: -24rpx; 
                color: #8296C0;
                width: 150rpx;
                line-height: 100%;
                text-align: right;
                font-size: 26rpx;
                icon{
                margin-bottom: 10rpx;
                font-size: 26rpx;
                }
              }
            }
          }
        }
      }
      .images-box{
        position: absolute;
        top:520rpx ;
        left: 0;
        width: 100%;
        background: #eee;
        z-index: 9;
      }
      .img_item {
        width: 48%;
        margin: 1%;
        display: inline-block;
        vertical-align: top;
        image{
          border-radius: 30rpx;
          position: relative;
          z-index: 999;
          animation: faedin .5s ease-in;
        }
      }
    }
  // .images-box{
  //   width: 100vw;
  //   padding: 20rpx 20rpx 0 20rpx;
  //   height: 58vh;
  //   box-sizing: border-box;
  //   .left{
  //     width: 100%;
  //     height: 100%;
  //     float: left;
  //     image{
  //       width: 30%;
  //       height: 200rpx;
  //       margin: 1.5%;
  //       border-radius: 20rpx;
  //     }
  //   }
  // }
  .pop{
    padding-left: 60rpx;
    .nodata{
      width: 100%;
      height: 50vh;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 34rpx;
      color: #ccc;
    }
    .top{
      min-height: 220rpx;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding: 30rpx 0;
      position: relative;
      .btns,.btns-on,.btns-on::after{
        width: 200rpx;
        height: 80rpx;
        border-radius: 50rpx;
        background-color: #F0EFF5;
        // display: flex;
        // justify-content: center;
        // align-items: center;
        line-height: 80rpx;
        color: #4A4A4B;
        text-align: center;
        margin: 30rpx 30rpx 0 0;
      }
      .btns-on{
        color: #fff;
        position: relative;
        overflow: hidden;
        background: linear-gradient(to right, #0575e6, #021b79);
        transition: all 1s;
      }
      
      .bot{
        width: 100%;
        height: 80vh;
        position: absolute;
        bottom: -80vh;
        overflow: scroll;
        left: 0;
       
        .bot-btns{
          width: 95%;
          height: 80rpx;
          border-radius: 40rpx;
          background-color: #F0EFF5;
          margin: 30rpx 0rpx;
          line-height: 80rpx;
          padding: 0 20rpx;
          .day,.time,.pics{
            display: inline-block;
          }
          .day{
            font-weight: 700;
            color: #4A4A4B;
            margin-left: 10rpx;
            width: 70%;
          }
          .pics{
            float: right;
            color: #004098;
          }
        }
      }
    }
  }
  .buttons{
    position: fixed;
    bottom: 0;
    width: 120rpx;
    min-height: 330rpx;
    right: 30rpx;
    z-index: 999;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .search,.renlian,.goTop{
      display: inline-block;
      background: rgba(0, 0, 0, .5);
      width: 100rpx;
      height: 100rpx;
      border-radius: 50rpx;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 50rpx;
      image{
        width: 50%;
        height: 50%;
        object-fit: contain;
      }
    }
  }
}